<!DOCTYPE html>
<html>

<head>
    <meta charset="utf-8">
    <title>tl-ops-manage后台</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">
    <script src="../lib/axios.js"></script>
    <script src="../lib/echarts.min.js"></script>
    <script src="../lib/layui/layui.js" v="layui" e="layui"></script>
    <link rel="stylesheet" type="text/css" href="../lib/layui/css/layui.css" />
    <link rel="stylesheet" type="text/css" href="https://im.iamtsm.cn/lay/dist/layuiadmin/style/admin.css" />

</head>

<style>
    .tl-inspector {
        display: flex;
        width: 430px;
        height: 27px;
        margin: 10px auto;
        border-radius: 6px;
        background-color: rgba(0, 0, 0, .04);
    }

    .tl-inspector-span {
        cursor: pointer;
        width: 128px;
        line-height: 30px;
        height: 31px;
        margin-top: -2px;
        font-size: 14px;
        color: rgb(175 134 134 / 90%);
        border-radius: 4px;
        text-align: center;
        background-color: transparent;
        transition: background 0.5s;
    }

    .tl-inspector-span-active {
        color: #df0606;
        font-weight: 800;
        background-color: #fff;
        box-shadow: 0 2px 4px rgb(0 0 0 / 8%), 0 0 4px rgb(0 0 0 / 8%);
    }

    .tl-icon-font {
        border-radius: 23px;
        padding: 2px;
        font-size: 12px;
        background: burlywood;
        cursor: pointer;
    }
    #tl-console-load-sync .layui-form-switch{
        margin-top: 0px;
        margin-right: 5px;
    }
</style>

<body>
    <div class="layui-fluid">
        <div class="layui-row layui-col-space15">
            <div class="layui-col-sm12" style="margin-bottom: 15px;">
                <div class="layui-row layui-col-space15" id="tl-ops-web-console-service-view"> </div>
                <script id="tl-ops-web-console-service-tpl" type="text/html">
                    {{#  if(d.length === 0) { }}
                    
                    {{#  } else { }}
                    {{#  layui.each(d, function(index, service){ }}
                    <div class="layui-col-sm3 layui-col-md3">
                        <div class="layui-card">
                            <div class="layui-card-header">
                                <span class="layui-badge layui-bg-blue layuiadmin-badge">{{service.name}}</span>
                                服务健康状态
                            </div>
                            <div class="layui-card-body layuiadmin-card-list" style="padding: 9px;">
                                <div style="display: inline-flex">
                                    <svg viewBox="0 0 1024 1024" width="24" height="24">
                                        <path d="M512 
                                        298.666667c117.333333 0 213.333333 96 213.333333 213.333333s-96 
                                        213.333333-213.333333 213.333333-213.333333-96-213.333333-213.333333S394.666667 
                                        298.666667 512 298.666667z" p-id="1332" fill="#78fa85"></path>
                                    </svg>
                                    <div style="color:#78fa85;font-weight:800">{{service.online_count}}个节点</div>
                                </div>
                                <div style="display: inline-flex;float: right;">
                                    <svg viewBox="0 0 1024 1024" width="24" height="24">
                                        <path d="M512 
                                        298.666667c117.333333 0 213.333333 96 213.333333 213.333333s-96 
                                        213.333333-213.333333 213.333333-213.333333-96-213.333333-213.333333S394.666667 
                                        298.666667 512 298.666667z" p-id="1251" fill="#bfbfbf"></path>
                                    </svg>
                                    <div style="color:#bfbfbf;">{{service.offine_count}}个节点</div>
                                </div>
                            </div>
                        </div>
                    </div>
                    {{#  }); }}
                    {{#  } }}
                </script>
            </div>


            <div class="tl-inspector">
                <div class="tl-inspector-span tl-inspector-span-active"
                    onclick="tl_ops_web_console_change_nav('balance')" id="balance-nav" style="margin-right: 16px;">负载监测
                </div>
                <div class="tl-inspector-span" onclick="tl_ops_web_console_change_nav('health')" id="health-nav"
                    style="margin-right: 16px;">健康监测</div>
                <div class="tl-inspector-span" onclick="tl_ops_web_console_change_nav('fuselimit')" id="fuselimit-nav"
                    style="margin-right: 16px;">
                    熔断监测</div>
                <div class="tl-inspector-span" onclick="tl_ops_web_console_change_nav('waf')" id="waf-nav">
                    WAF检测</div>
            </div>

            <div style="text-align: right;" class="layui-form" id="tl-console-load-sync" onmouseleave="tl_mouse_leave_tips()"
                onmouseenter="tl_mouse_enter_tips('tl-console-load-sync','开启后, 每2秒刷新一次数据')">
                <input type="checkbox" name="switch" lay-skin="switch" lay-text="实时同步|非实时同步" >
                <i style="display: none" class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" id="tl-console-load-sync-icon"></i>
            </div>

            <div class="layui-col-sm12">
                <div class="layui-row layui-col-space15" id="tl-ops-web-console-echarts-service-view"> </div>
                <script id="tl-ops-web-console-echarts-service-tpl" type="text/html">
                    {{#  if(d.length === 0) { }}
                    <div style="text-align: center; font-weight: 800; color: brown; display: grid;">
                        <svg style="width: 100%;" viewBox="0 0 1024 1024" p-id="4310" width="128" height="128">
                            <path d="M106.97251697 619.07623114h289.80414734c11.63872078 0 21.53163343 9.89291266 21.53163343 21.53163345 0 51.21037142 40.73552271 91.3639581 92.52783018 91.3639581s92.52783017-40.15358668 92.52783018-91.3639581c0-11.63872078 9.89291266-21.53163343 21.53163344-21.53163345h288.05833923c8.72904058 0 16.29420908 5.23742435 19.78582532 12.80259287-4.65548831-15.71227305-12.80259285-32.00648214-13.96646493-34.3342263 0-0.58193603-0.58193603-0.58193603-0.58193604-0.58193603l-92.52783018-146.6478818c0-0.58193603-0.58193603-0.58193603-0.58193605-1.16387207-1.74580811-1.74580811-15.71227305-19.78582532-32.00648212-29.09680195-16.87614513-9.89291266-40.15358668-11.63872078-43.06326688-11.63872078h-494.64563303c-4.07355227 0-23.8593776 0.58193603-39.57165064 9.89291266-15.71227305 9.89291266-27.35099383 26.76905779-28.5148659 28.51486591 0 0-0.58193603 0.58193603-0.58193603 1.16387208l-77.97942921 138.50077725c-2.32774415 3.49161624-9.89291266 16.87614513-16.29420909 37.82584251 4.07355227-2.9096802 8.72904058-5.23742435 14.54840098-5.23742435z" fill="#bfbfbf" p-id="4311"></path><path d="M937.3952444 670.28660257c0-1.74580811-1.16387208-16.87614513-4.07355228-31.4245461v2.32774415c0 11.63872078-9.31097662 21.53163343-21.53163344 21.53163343h-267.69057785l-2.90968021 11.05678476c-15.13033701 59.93941199-69.25038862 101.25687076-130.93560873 101.25687075-62.26715616 0-116.38720777-41.8993948-131.51754478-101.25687075l-2.9096802-11.05678476H106.39058092c-8.72904058 0-15.71227305-5.23742435-19.20388928-12.22065681-1.16387208 10.4748487-1.16387208 18.62195325-1.16387208 22.11356949v157.12273048c0 2.9096802 1.74580811 26.76905779 18.62195325 42.48133083 16.87614513 15.71227305 43.64520291 16.87614513 46.5548831 16.87614514h1.16387208-0.58193603 715.78132778c5.23742435 0 31.4245461-0.58193603 49.46456329-16.87614514 18.0400172-16.29420908 19.20388928-38.40777856 19.2038893-44.80907498l1.16387207-157.12273049zM509.0903198 348.47597308c-16.29420908 0-29.67873798-13.3845289-29.67873798-29.67873798V148.87191176c0-16.29420908 13.3845289-29.67873798 29.67873798-29.67873798s29.67873798 13.3845289 29.67873799 29.67873798v170.50725939c0 16.29420908-13.3845289 29.09680195-29.67873799 29.09680193z m198.44018926-1.16387207c-16.29420908 0-29.67873798-13.3845289-29.67873798-29.67873799 0-6.98323246 2.32774415-13.3845289 6.40129642-18.62195323l67.5045805-83.21685357c5.81936038-6.98323246 13.96646493-11.05678473 23.27744156-11.05678473 6.98323246 0 13.3845289 2.32774415 18.62195324 6.40129643 6.40129643 4.65548831 9.89291266 12.22065682 11.05678474 19.78582531 0.58193603 7.56516851-1.74580811 15.71227305-6.40129642 21.53163344l-67.50458051 83.21685356c-5.81936038 8.14710455-13.96646493 12.22065682-23.27744155 11.63872078z m-393.38876226-1.74580812c-8.72904058 0-17.45808117-4.07355227-23.27744156-11.05678474l-66.34070843-83.7987896c-9.89291266-12.80259285-8.14710455-31.4245461 4.65548831-41.89939479 5.23742435-4.07355227 11.63872078-6.40129643 18.62195325-6.40129643 9.31097662 0 17.45808117 4.07355227 23.27744155 11.05678474l66.34070843 83.79878959c9.89291266 12.80259285 8.14710455 31.4245461-4.65548831 41.8993948-5.23742435 4.07355227-12.22065682 6.40129643-18.62195324 6.40129643z" fill="#bfbfbf" p-id="4312"></path></svg>
                        <p >服务为空，去添加一个服务吧</p>
                    </div>
                    {{#  } else { }}
                        {{#  layui.each(d, function(index, service){ }}
                            {{#  if(service.nodes) { }}
                                {{#  layui.each(service.nodes, function(index, node){ }}
                                <div class="layui-col-sm6">
                                    <div class="layui-card" style="border-radius: 24px;">
                                        <div class="layui-card-header"> 
                                            <span class="layui-badge layui-bg-blue">{{service.id}}服务</span>
                                            <i class="layui-icon layui-icon-help tl-icon-font" id="tl-icon-{{service.id}}-{{node.id}}"
                                            onmouseleave="tl_mouse_leave_tips()" onmouseenter="tl_mouse_enter_tips('tl-icon-{{service.id}}-{{node.id}}','{{node.limit_msg}}')"></i>
                                        </div>
                                        <div class="layui-card-body">
                                            <div style="height: 200px;margin-top: 20px; margin-bottom: 20px;"
                                                id="{{service.id}}-{{node.id}}" onmouseleave="tl_mouse_leave_tips()" onmouseenter="tl_mouse_enter_tips('{{service.id}}-{{node.id}}','{{node.fuse_msg}}')"> </div>
                                        </div>
                                    </div>
                                </div>
                                {{#  }); }}
                            {{#  }else { }}
                                <div class="layui-col-sm6">
                                    <div class="layui-card" style="border-radius: 24px;">
                                        <div class="layui-card-header">
                                            {{#  if(service.type !== 'waf') { }}
                                            <span class="layui-badge layui-bg-blue">{{service.id}}服务</span>
                                            {{#  } }}
                                        
                                            {{#  if(service.type === 'balance') { }}
                                            <div style="float: right;" class="layui-form">
                                                <span class="layui-badge layui-bg-blue " style="padding: 4px 14px 4px 14px;cursor: pointer;">当天</span>
                                                <span class="layui-badge layui-bg-red layui-btn-disabled"
                                                    style="padding: 4px 14px 4px 14px;cursor: pointer;" id="tl-balance-span-all-{{service.id}}"
                                                    onmouseleave="tl_mouse_leave_tips()"
                                                    onmouseenter="tl_mouse_enter_tips('tl-balance-span-all-{{service.id}}','暂不支持')">全部</span>
                                            </div>
                                            {{#  } }}

                                            {{#  if(service.type === 'health') { }}
                                            <div style="float: right;" class="layui-form">
                                                {{#  if(service.uncheck === false) { }}
                                                <i class="layui-icon layui-icon-loading layui-anim layui-anim-rotate layui-anim-loop" style="font-weight: bold;color: #52db49;"
                                                    id="tl-health-span-loading-{{service.id}}" onmouseleave="tl_mouse_leave_tips()" 
                                                    onmouseenter="tl_mouse_enter_tips('tl-health-span-loading-{{service.id}}','当前自检中')"></i>
                                                {{#  } else{}}
                                                <i style="font-weight: bold;color: #52db49;" class="layui-icon layui-icon-play" id="tl-health-span-play-{{service.id}}" 
                                                    onmouseleave="tl_mouse_leave_tips()" onmouseenter="tl_mouse_enter_tips('tl-health-span-play-{{service.id}}','自检已暂停')">
                                                </i>
                                                {{#  } }}
                                            </div>
                                            {{#  } }}

                                            {{#  if(service.type === 'waf') { }}
                                            <div style="float: right;" class="layui-form">
                                                <span class="layui-badge layui-bg-blue " style="padding: 4px 14px 4px 14px;cursor: pointer;">当天</span>
                                                <span class="layui-badge layui-bg-red layui-btn-disabled"
                                                    style="padding: 4px 14px 4px 14px;cursor: pointer;" id="tl-waf-span-all-{{service.id}}"
                                                    onmouseleave="tl_mouse_leave_tips()"
                                                    onmouseenter="tl_mouse_enter_tips('tl-waf-span-all-{{service.id}}','暂不支持')">全部</span>
                                            </div>
                                            {{#  } }}

                                        </div>
                                        <div class="layui-card-body">
                                            <div style="height:300px;" id="{{service.id}}"> </div>
                                        </div>
                                    </div>
                                </div>
                            {{#  } }}
                        {{#  }); }}
                    {{#  } }}
                </script>
            </div>
        </div>
    </div>


    

    <script src="../tl_ops_web_comm.js"></script>
    <script src="tl_ops_web_console.js"></script>
    <script>
        layui.use(['table', 'form', 'laytpl'], tl_ops_web_console_main);
    </script>
</body>

</html>